<!--
 * @Description:
 * @Author: william
 * @Date: 2025-02-17 16:47:40
 * @LastEditors: william
 * @LastEditTime: 2025-04-29 14:31:05
-->
<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="title"
    width="850px"
    :before-close="handleClose"
  >
    <el-form
      ref="refDialogForm"
      v-loading="formLoading"
      class="set-dialog-form"
      :label-width="
        language === 'en' ? '180px' : type == 'add' ? '80px' : '110px'
      "
      :model="formData"
      :rules="rules"
    >
      <el-row>
        <el-col v-if="type == 'add'" :span="24">
          <el-form-item :label="$t('hotel.customer')" prop="customerId">
            <div class="customerWrap">
              <SelectCustomer
                :key="customerKey"
                v-model="formData.customerId"
                :label="$t('hotel.customer')"
              />
              <div class="add-customer">
                <el-button text type="primary" @click="handleAddCustomer">{{
                  $t('public.add')
                }}</el-button>
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-col v-if="type == 'edit'" :span="12">
          <el-form-item :label="$t('fleet.customerName')">
            <TextInput
              v-model="formData.customerName"
              :placeholder="$t('fleet.customerName')"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col v-if="type === 'edit'" :span="12">
          <el-form-item
            :label="$t('fleet.customerContact')"
            prop="customerContact"
          >
            <TextInput
              v-model="formData.customerContact"
              :label="$t('fleet.customerContact')"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="type === 'edit'" :span="12">
          <el-form-item
            :label="$t('fleet.contactPhone')"
            prop="customerContactPhone"
          >
            <InputPhone
              v-model="formData.customerContactPhone"
              :label="$t('fleet.contactPhone')"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="type === 'edit'" :span="12">
          <el-form-item
            :label="$t('fleet.customerEmail')"
            prop="customerContactEmail"
          >
            <TextInput
              v-model="formData.customerContactEmail"
              :label="$t('fleet.customerEmail')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('hotel.businessType')" prop="businessType">
            <el-select
              v-model="formData.businessType"
              :placeholder="
                g_rules.zhAndEnShowMsg(
                  g_t('public.pleaseSelect'),
                  $t('hotel.businessType')
                )
              "
            >
              <el-option
                v-for="item in g_options.businessTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('hotel.hotelInfo')" prop="hotel">
            <TextInput
              v-model="formData.hotel"
              type="textarea"
              :rows="2"
              :label="$t('hotel.hotelInfo')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('hotel.bookingTime')" prop="bookTime">
            <DateTime
              v-model="formData.bookTime"
              style="width: 100%"
              :default-time="new Date(2025, 1, 1, 0, 0, 0)"
              :label="$t('hotel.bookingTime')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('hotel.checkInTime')" prop="startTime">
            <DateTime
              v-model="formData.startTime"
              style="width: 100%"
              :default-time="new Date(2025, 1, 1, 23, 59, 59)"
              :label="$t('hotel.checkInTime')"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item :label="$t('hotel.roomType')" prop="roomType">
            <TextInput
              v-model="formData.roomType"
              :label="$t('hotel.roomType')"
            />
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item :label="$t('hotel.personCount')" prop="peopleCount">
            <TextInput
              v-model="formData.peopleCount"
              verify-type="nzint"
              :label="$t('hotel.personCount')"
              :maxlength="4"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('fleet.costExpense')" prop="costExpense">
            <TextInput
              v-model="formData.costExpense"
              verify-type="float"
              :label="$t('fleet.costExpense')"
              @blur="handleInputBlur('costExpense')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('hotel.amount')" prop="price">
            <TextInput
              v-model="formData.price"
              verify-type="float"
              :label="$t('hotel.amount')"
              @blur="handleInputBlur('price')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('hotel.priceType')" prop="priceType">
            <el-select
              v-model="formData.priceType"
              :placeholder="
                g_rules.zhAndEnShowMsg(
                  g_t('public.pleaseSelect'),
                  $t('hotel.priceType')
                )
              "
            >
              <el-option
                v-for="item in g_options.priceTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('hotel.payType')" prop="payType">
            <el-select
              v-model="formData.payType"
              :placeholder="
                g_rules.zhAndEnShowMsg(
                  g_t('public.pleaseSelect'),
                  $t('hotel.payType')
                )
              "
            >
              <el-option
                v-for="item in g_options.orderPayMethod2Options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('hotel.responsiblePerson')"
            prop="responsiblePerson"
          >
            <TextInput
              v-model="formData.responsiblePerson"
              :label="$t('hotel.responsiblePerson')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('hotel.signPerson')" prop="signPerson">
            <TextInput
              v-model="formData.signPerson"
              :label="$t('hotel.signPerson')"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="type === 'edit'" :span="12">
          <el-form-item
            :label="$t('fleet.emergencyContact')"
            prop="customerEmergencyContact"
          >
            <TextInput
              v-model="formData.customerEmergencyContact"
              :label="$t('fleet.emergencyContact')"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="type === 'edit'" :span="12">
          <el-form-item
            :label="$t('fleet.emergencyContactPhone')"
            prop="customerEmergencyContactPhone"
          >
            <InputPhone
              v-model="formData.customerEmergencyContactPhone"
              :label="$t('fleet.emergencyContactPhone')"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col v-if="type === 'edit'" :span="12">
          <el-form-item :label="$t('fleet.orderStatus')" prop="status">
            <el-select
              v-model="formData.status"
              :placeholder="
                g_rules.zhAndEnShowMsg(
                  g_t('public.pleaseSelect'),
                  $t('fleet.orderStatus')
                )
              "
            >
              <el-option
                v-for="item in g_options.bookingOrderStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item :label="$t('public.remark')" prop="note">
            <TextInput
              v-model="formData.note"
              type="textarea"
              :rows="2"
              :label="$t('public.remark')"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="form-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.cancel')
        }}</el-button>
        <el-button type="primary" @click="handleSubmitForm">{{
          $t('public.confirm')
        }}</el-button>
      </div>
    </template>
  </BaseDialog>
  <AddCustomer
    v-if="AddCustomerVisible"
    v-model="AddCustomerVisible"
    @update="customerKey++"
  />
</template>

<script setup>
import AddCustomer from '@/views/customer/component/AddOrEditDialog.vue'

const props = defineProps({
  type: {
    type: String,
    default: 'add' // add | edit
  },
  id: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update'])
const dialogVisible = defineModel({
  type: Boolean,
  default: false
})
const { language } = storeToRefs(useAppStore())
const title = computed(() =>
  props.type === 'add' ? g_t('fleet.createOrder') : g_t('fleet.editOrder')
)

const refDialogForm = ref(null)
const formLoading = ref(false)
const formData = ref({
  customerId: '',
  customerName: '',
  customerContact: '',
  customerContactPhone: '',
  customerContactEmail: '',
  businessType: '',
  hotel: '',
  bookTime: '',
  startTime: '',
  // roomType: '',
  peopleCount: '',
  costExpense: '',
  price: '',
  priceType: '',
  payType: '',
  responsiblePerson: '',
  signPerson: '',
  customerEmergencyContact: '',
  customerEmergencyContactPhone: '',
  note: ''
  // status: ''
})
const rules = {
  customerId: g_rules.selectRule(g_t('hotel.customer')),
  customerContact: g_rules.commonInputText(g_t('fleet.customerContact')),
  customerContactPhone: g_rules.phone({
    label: g_t('fleet.contactPhone')
  }),
  customerContactEmail: g_rules.email({
    label: g_t('fleet.customerEmail'),
    required: false
  }),
  businessType: g_rules.selectRule(g_t('hotel.businessType')),
  // hotel: g_rules.commonInputText(g_t('hotel.hotelInfo')),
  bookTime: g_rules.selectRule(g_t('hotel.bookingTime')),
  startTime: g_rules.selectRule(g_t('hotel.checkInTime')),
  // roomType: g_rules.commonInputText(g_t('hotel.roomType')),
  peopleCount: g_rules.personCount,
  costExpense: g_rules.costExpense,
  price: g_rules.amount,
  priceType: g_rules.selectRule(g_t('hotel.priceType')),
  payType: g_rules.selectRule(g_t('hotel.payType')),
  responsiblePerson: g_rules.commonInputText(g_t('hotel.responsiblePerson')),
  signPerson: g_rules.commonInputText(g_t('hotel.signPerson')),
  // customerEmergencyContact: g_rules.commonInputText(
  //   g_t('fleet.emergencyContact')
  // ),
  customerEmergencyContactPhone: g_rules.phone({
    label: g_t('fleet.emergencyContactPhone'),
    required: false
  })
  // status: g_rules.selectRule(g_t('fleet.orderStatus'))
}
const customerKey = ref(0)
const AddCustomerVisible = ref(false)

onMounted(() => {
  props.type === 'edit' && getFormData()
})

const getFormData = _ => {
  g_api.hotel.apiHotelOrderDetail({ id: props.id }).then(({ code, data }) => {
    if (code === '200' && data) {
      formData.value = {
        ...formData.value,
        id: '',
        status: ''
      }
      g_utils.assignFormData(formData.value, data)
      console.log('formData.value', formData.value)
    }
  })
}

const handleClose = _ => {
  dialogVisible.value = false
}

const handleAddCustomer = _ => {
  AddCustomerVisible.value = true
}

const handleInputBlur = prop => {
  // 数字化处理
  refDialogForm.value.validateField([prop], vaild => {
    if (vaild && formData.value[prop]) {
      formData.value[prop] = formData.value[prop] * 1
    }
  })
}

const handleSubmitForm = () => {
  if (formLoading.value) return
  refDialogForm.value.validate(valid => {
    console.log('formData.value', formData.value)
    if (!valid) return
    formLoading.value = true
    const urlMethod =
      props.type === 'add'
        ? g_api.hotel.apiHotelOrderCreate
        : g_api.hotel.apiHotelOrderUpdate
    urlMethod(formData.value)
      .then(res => {
        if (res.code === '200') {
          ElMessage({
            message: res.message,
            type: 'success'
          })
          handleClose()
          emit('update')
        }
      })
      .finally(() => {
        formLoading.value = false
      })
  })
}
</script>

<style scoped lang="scss">
.customerWrap {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .add-customer {
    margin-left: 10px;
  }
}
</style>
